import React, { Component } from 'react'
import { shopcarlist } from '../api/index'

export default class Payment extends Component {
    state = {
        shopcarlist: []
    }
    // componentDidMount() {
    //     this.setState({
    //         shopcarlist: this.props.location.state.data
    //     })
    //     console.log(this.state.shopcarlist);
    // }

    componentDidMount() {
        this.getlist()
    }

    getlist = async () => {
        let res = await shopcarlist()
        this.setState({
            shopcarlist: res.data.data,
        })
    }


    //到地址页面
    Address = () => {
        this.props.history.push('/address')
    }

    
    //到地址页面
    order = () => {
        this.props.history.push('/order')
    }

    render() {

        const { shopcarlist } = this.state;

        return (
            <div className='payment'>
                <div className="payment_header">
                    <p onClick={() => { this.props.history.goBack() }}>&lt;&nbsp;返回</p>
                    <p>订单</p>
                    <p></p>
                </div>
                <div className="payment_main">
                    <div className="payment_address" onClick={() => { this.Address() }}>
                        <dl>
                            <dt>
                                <img src="https://img2.baidu.com/it/u=1862544116,3499707576&fm=26&fmt=auto" alt="" />
                            </dt>
                            <dd>
                                <p><span>姓名</span><span>电话</span></p>
                                <p>地址</p>
                            </dd>
                        </dl>
                    </div>
                    <div className="payment_shoplist">
                        {
                            shopcarlist?.map((item, idx) => {
                                return <div className="boxlist" key={idx}>
                                    <dl>
                                        <dt>
                                            <img src={item.img} alt="" />
                                        </dt>
                                        <dd>
                                            <p><span>{item.title}</span><span>数量:{item.num}</span></p>
                                            <p>单价:{item.price}￥</p>
                                        </dd>
                                    </dl>
                                </div>
                            })
                        }
                    </div>
                </div>
                <div className="payment_footer">
                    <p></p>
                    <p>合计:￥总和</p>
                    <button onClick={() => { this.order() }}>去支付</button>
                </div>
            </div>
        )
    }
}
